<template name="cc-bar-modify">
	<el-row class="cc-bar-modify" type="flex" justify="space-between" align="middle">
		<slot name="left">
			<el-button
				type="danger"
				:size="size"
				@click="onLeftClick"
				:disabled="disabledLeft"
				v-if="showLeft"
			>批量删除</el-button>
		</slot>
		<slot>
			<div class="title">
				<b :style="'font-size: ' + titleFontSize + 'px;'">{{title}}</b>
			</div>
		</slot>
		<slot name="right">
			<el-button
				type="primary"
				:size="size"
				@click="onRightClick"
				:disabled="disabledRight"
				v-if="showRight"
			>添加</el-button>
		</slot>
	</el-row>
</template>

<script>
	export default {
		name: "cc-bar-modify",
		props: {
			title: {
				type: String,
				default: ""
			},
			size: {
				type: String,
				default: "small"
			},
			"show-left": {
				type: Boolean,
				default: true
			},
			"show-right": {
				type: Boolean,
				default: true
			},
			"disabled-left": {
				type: Boolean,
				default: false
			},
			"disabled-right": {
				type: Boolean,
				default: false
			}
		},
		data() {
			return { titleFontSize: 16 };
		},
		updated() {
			this.titleFontSize =
				22 - ["large", "medium", "small", "mini"].indexOf(this.size) * 2;
		},
		methods: {
			onLeftClick(...args) {
				this.$emit("left-click", ...args);
			},
			onRightClick(...args) {
				this.$emit("right-click", ...args);
			}
		}
	};
</script>

<style lang="less" scoped>
	.title {
		flex-grow: 1;
		text-align: center;
	}
</style>